
<!-- e_chart部分开始 -->
<div class="layui-coutainer" id="echarts_div">
   <div class="layui-row" >
   
    <div class="layui-col-lg9">
      <div class="layui-card">
        <div class="layui-card-body" style="text-align: center;">
           <table class="layui-table" id="car_table" lay-filter="car_table"></table>
        </div>
      </div>
    </div>
      <!-- 雷达图开始 -->
    <div class="layui-col-lg3" >
      <div class="layui-row " style="padding: 5px; background-color: #F2F2F2;">
        <div class="layui-col-md12">
          <div class="layui-card">
            <!-- <div class="layui-card-header">健康数据雷达图</div> -->
            <div class="layui-card-body" style="text-align: center;">
               <div  id="car_radar_chart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br>
  <div class="layui-row" >

    <div class="layui-col-lg9">
      <div class="layui-card">
        <div class="layui-card-body" style="text-align: center;">
           <table class="layui-table" id="apply_table" lay-filter="apply_table"></table>
        </div>
      </div>
      
    </div>
      <!-- 雷达图开始 -->
    <div class="layui-col-lg3" >
      <div class="layui-row " style="padding: 5px; background-color: #F2F2F2;">
        <div class="layui-col-md12">
          <div class="layui-card">
            <!-- <div class="layui-card-header">健康数据雷达图</div> -->
            <div class="layui-card-body" style="text-align: center;">
               <div  id="apply_radar_chart"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</div>
<!-- e_chart部分结束 -->
<!-- js代码开始 -->
<!-- 引用echart插件 -->
<script src="/static/js/echarts.min.js"></script>
<script type="text/javascript">
// $('.layui-body').attr('style','padding:10px;bottom:0px;left:0px') 
// $('.layui-side').hide()
form.render()
// table.render()
// 图标的宽度和高度的适应屏幕处理
var radar_chart_width=get_width/3
var radar_chart_height=get_height/2.5
$('#car_radar_chart').attr('style','height:'+radar_chart_height+'px;width:auto')
$('#apply_radar_chart').attr('style','height:'+radar_chart_height+'px;width:auto')
var report_data_detail_height=get_height-radar_chart_height-100
var report_data_detail_width=get_width/1.1
// $('#alarm_report_detail_table').attr('style','height:'+report_data_detail_height+'px;width:auto;')

var ajax_url='car_board'

// 车辆数据表格渲染函数
var car_table_show=function(table_data){
  table.render({
    elem: '#car_table',
    data: table_data,
    toolbar:'#table_header',
    id:'car_table',
    size:'sm',
    height: radar_chart_height,
    cols: [[
        {type: "checkbox", fixed: "left"},
        // {field: 'id', title: 'ID',width:20,sort:true},
        {field: 'name', title: '车牌',sort:true},
        {field: 'kind', title: '类别',sort:true,templet:function(row){
          if(row.detail=='0'){
            return ''
          }
          var car_detail=eval('('+row.detail+')')
          return car_detail.kind
        }},
        {field: 'model', title: '车型',sort:true,templet:function(row){
          if(row.detail=='0'){
            return ''
          }
          var car_detail=eval('('+row.detail+')')
          return car_detail.model
        }},
        {field: 'passenger', title: '核载人数',templet:function(row){
          if(row.detail=='0'){
            return ''
          }
          var car_detail=eval('('+row.detail+')')
          return car_detail.passenger
        }},
        {field: 'department', title: '部门',sort:true,templet:function(row){
          if(row.detail=='0'){
            return ''
          }
          var car_detail=eval('('+row.detail+')')
          return car_detail.department
        }},
        {field: 'driver', title: '司机',sort:true,templet:function(row){
          if(row.detail=='0'){
            return ''
          }
          var car_detail=eval('('+row.detail+')')
          return car_detail.driver
        }},
        
        {field: 'device_id', title: '监控设备',sort:true},
        {field: 'car_detail', title: '照片',sort:true,templet:function(row){
          var car_detail=eval('('+row.detail+')')
          if(car_detail.picture=='0' | car_detail.picture==null){
            return ''
          }
          var picture='/static/data_from_web/picture/car/'+car_detail.picture
          var car_detail_show='<img src="'+picture+'" style="width:150px">'
          return car_detail_show
        }},
        {field: 'owner', title: '归属账户',sort:true},
        {field: 'remark', title: '备注'},
        {field: 'date_added', title: '添加时间',sort:true},
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}

// 申请数据表格渲染函数
var apply_table_show=function(table_data){
    table.render({
    elem: '#apply_table',
    toolbar:'#table_header',
    data: table_data,
    id:'apply_table',
    size:'sm',
    height: radar_chart_height,
    cols: [[
        {type: "checkbox", fixed: "left"},
        // {field: 'id', title: 'ID',width:20,sort:true},
        {field: 'start', title: '出发地',sort:true},
        {field: 'end', title: '目的地',sort:true},
        {field: 'purpose', title: '用车事由',sort:true},
        {field: 'passenger', title: '乘车人数',sort:true},
        {field: 'time_use', title: '用车时间',sort:true},
        {field: 'car', title: '使用车辆',sort:true},
        {field: 'status', title: '状态',sort:true,templet:function(d){
          var value=d.status
          var param_set=eval('('+d.param_set+')')
          if(d.status=='审批未通过'){
            value=value+'：'+param_set.reject
          }
          return value
        }},
        {field: 'owner', title: '申请人',sort:true,templet:function(d){

          return sub_user[d.owner].visible_name
        }},
        {field: 'apply_time', title: '申请时间',sort:true},
        {field: 'remark', title: '备注',sort:true},
    ]],
    limits: [10, 15, 20, 25, 50, 100],
    limit: 10,
    page: true
  });
}


var car_data;
var apply_data;
var sub_user={};
var handle_get_result=function(data){
  if(data.sub_user){
    data['sub_user'].forEach(item=>{
      sub_user[item.username]=item
    })
  }
  car_data=data.car_data
  car_table_show(car_data)
  show_car_chart(car_data)

  apply_data=data.apply_data
  apply_table_show(apply_data)
  show_apply_chart(apply_data)
}

get_info_ajax(ajax_url,'get_init_data',handle_get_result)

// 健康数据查询的ajax
var get_report_data_detail='0';




// 图标展示功能函数

var show_car_chart=function(data){
  var online=[],offline=[],in_use=[],free=[];
  car_data.forEach(item=>{
    if(item.status=='0'){
      free.push(item)
    }else{
      in_use.push(item)
    }
    
    device.forEach(d=>{
      if(d.device_id==item.device_id){
        if(d.on_off_line=='online' || d.on_off_line=='sleep'){
          online.push(item)
        }else{
          offline.push(item)
        }
      }
    })
    
  })
  var radar_chart = echarts.init(document.getElementById('car_radar_chart'));

  // 指定图表的配置项和数据
  var option = {
    title: {
    text: '车辆统计',
    subtext: '车辆总数：'+data.length,
    left: 'left'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['在线','离线','使用','空闲']
    },
    series: [
        {
            name: '车辆统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],

            data: [
                {value: online.length, name: '在线'+online.length,attch:'sos_alarm'},
                {value: offline.length, name: '离线'+offline.length,attch:'efence'},
                {value: in_use.length, name: '使用'+in_use.length,attch:'stop_alarm'},
                {value: free.length, name: '空闲'+free.length,attch:'speed_alarm'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
  }
  radar_chart.setOption(option);
}


var show_apply_chart=function(data){
  var apply,pass,reject,end;
  apply=filter_func(data,'status','已提交，待审批')
  pass=filter_func(data,'status','审批通过')
  reject=filter_func(data,'status','审批未通过')
  end=filter_func(data,'status','申请完结')
  var radar_chart = echarts.init(document.getElementById('apply_radar_chart'));

  // 指定图表的配置项和数据
  var option = {
    title: {
    text: '审批统计',
    subtext: '申请总数：'+data.length,
    left: 'left'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['待审批','通过','驳回','完结']
    },
    series: [
        {
            name: '车辆统计',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],

            data: [
                {value: apply.length, name: '待审批'+apply.length,attch:'sos_alarm'},
                {value: pass.length, name: '通过'+pass.length,attch:'efence'},
                {value: reject.length, name: '驳回'+reject.length,attch:'stop_alarm'},
                {value: end.length, name: '完结'+end.length,attch:'speed_alarm'}
            ],
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
  }
  radar_chart.setOption(option);
}


</script>